<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>电影模块</el-breadcrumb-item>
            <el-breadcrumb-item>电影管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入订单编号" clearable v-model="orderNo" @clear="search">
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </el-col>
            </el-row>

    <el-table :data="orderList" border stripe>
        <el-table-column label="订单ID" width="180" prop="orderNo" ></el-table-column>
        <el-table-column label="用户名" width="100" prop="userName"></el-table-column>
        <el-table-column label="订单单价" width="100" prop="orderPrice"></el-table-column>
        <el-table-column label="订单总价" width="100" prop="orderTotalPrice"></el-table-column>
        <el-table-column label="创建时间" width="100" prop="orderTime"></el-table-column>
        <el-table-column label="电影场次" width="100" prop="scheduleId"></el-table-column>
        <el-table-column label="影票状态" width="100" prop="ticketState"></el-table-column>
        <el-table-column label="订单状态" width="100" prop="orderState"></el-table-column>
        <el-table-column label="操作">
            <!-- 拿到整行数据  scope.row可以将整行所有的参数(整个对象的值)来进行传递-->
            <template slot-scope="scope" >
                <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                <el-button type="danger" size="mini" @click="removeMovieById(scope.row.orderNo)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[6, 12, 24, 48]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        </el-card>

        <el-dialog title="修改订单" :visible.sync="editDialogVisible" width="50%" @close="editDepartFormClose">
            <!-- 修改模态框-->
            <el-form
                    :model="editOrder"
                    :rules="editOrderFormRules"
                    ref="editOrderFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="订单编号" prop="orderNo">
                    <el-input v-model="editOrder.orderNo" ></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="editOrder.userName"></el-input>
                </el-form-item>
                <el-form-item label="订单单价">
                    <el-input v-model="editOrder.orderPrice"></el-input>
                </el-form-item>
                <el-form-item label="订单总价">
                    <el-input  v-model="editOrder.orderTotalPrice"></el-input>
                </el-form-item>
                <el-form-item label="影票状态">
                    <el-input v-model="editOrder.ticketState"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-input v-model="editOrder.orderState"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="warning" size="mini" @click="modifyOrder">提交</el-button>
                <el-button type="danger" size="mini" @click="editDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                orderList:[],
                orderNo:"",
                pageNum: 1,
                pageSize: 5,
                total: 0,
                editDialogVisible:false,
                editOrder:{
                    orderNo:"",
                    userName:"",
                    orderPrice:"",
                    orderTotalPrice:"",
                    ticketState:0,
                    orderState:1
                },
                editOrderFormRules:{
                    orderNo: [
                        { required: true, message: "请输入订单编号", trigger: "blur" },
                        {
                            min: 19,
                            max: 19,
                            message: "订单编号必须是19個字符",
                            trigger: "blur",
                        }
                    ]
                }
            }
        },

    created(){
        this.search()
    },
    methods:{
         search(){
             this.$api.order
                 .orderList({
                    orderNo:this.orderNo,
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    total:this.total
                }).then((res)=>{
                    this.orderList=res.data.data.list;
                    this.pageSize=res.data.data.pageSize;
                    this.pageNum=res.data.data.pageNum;
                    this.total=res.data.data.total;
                    console.log(this.total)
                })
            },
        //删除
        async removeMovieById(id){      //如果要使用弹出提示框 需要在方法上添加、async(异步)关键字后 才可以使用(await)等待关键字
             const res = await this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).catch((err) => err)

            //选择确定是  返回值为:confirm
            if ("confirm" === res) {
                this.$api.order
                    .deleteOrder(id)
                    .then(res => {
                        this.$message.success("删除成功");
                        this.searchMovie();
                    })
                    .catch(err => {
                        this.$message.error("服务端异常，请联系管理员");
                    });



            }else {
                this.$message.info("取消删除")
            }

        },
        //修改模态框数据回显
        showEditDialog(row){
            this.editDialogVisible=true;
            this.editOrder.orderNo=row.orderNo;
            this.editOrder.userName=row.userName;
            this.editOrder.orderPrice=row.orderPrice;
            this.editOrder.orderTotalPrice=row.orderTotalPrice;
            this.editOrder.ticketState=row.ticketState;
            this.editOrder.orderState=row.orderState;
        },
        //修改
        modifyOrder(){
             this.$api.order.modifyOrder(this.editOrder).then((res)=>{
                 console.log(this.editOrder)
                 if(res.data.code==200){
                     this.$message.success("修改成功！")
                     this.editDialogVisible=false;
                     this.search()
                 }
             }).catch(err=>{
                 this.$message.error("服务端异常，请联系管理员");
             })
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize
            this.search()
        },
        handleCurrentChange(newPage) {
            this.pageNum = newPage
            this.search()
        },
        //监听模态框 使用close方法  发生关闭时清空所有输入字符
        editDepartFormClose(){
            // this.$refs.editOrderFormRef.resetFields();
        },
        }
    }
</script>

<style scoped>

</style>